<template>
    <div class="license-container">
        <div class="license-header">
            格诺诚平台监控系统
        </div>
        <div class="license-body">
            <div class="license-info">
                <p class="license-info-title">基础信息
                    <el-button type="primary" size="mini" icon="el-icon-refresh" style="float: right"
                               @click="licenseDialog = true">重新授权
                    </el-button>
                </p>
                <div class="license-info-view">
                    <ul>
                        <li>
                            <span>版本：</span>
                            <span>{{ licenseData.edition }}</span>
                        </li>
                        <li>
                            <span>采集器个数：</span>
                            <span>{{ licenseData.mcsCount }}</span>
                        </li>
                        <li>
                            <span>授权截止日期：</span>
                            <span>{{ licenseData.endDate }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="license-block">
                <p class="license-info-title">授权模块</p>
                <div class="license-info-view">
                    <el-checkbox v-for="item in licenseData.sysMenuDtoList" :key="item.id" v-model="checked" disabled>
                        {{ item.menu }}
                    </el-checkbox>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="license-num">
                <p class="license-info-title">授权数量</p>
                <div class="license-info-view">

                    <el-table
                        :data="licenseData.countList"
                        border
                        size="mini"
                        height="100%"

                        style="width: 100%">
                        <el-table-column
                            prop="title"
                            label="资源类型"
                            :resizable="false">
                        </el-table-column>
                        <el-table-column
                            prop="total"
                            label="授权数量"
                            :resizable="false">
                        </el-table-column>
                        <el-table-column
                            prop="used"
                            label="已使用"
                            :resizable="false">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!-- 授权 -->
        <el-dialog v-el-drag-dialog custom-class="custom-dialog" title="授权中心" :visible.sync="licenseDialog" width="50%"
                   :append-to-body="false" center>
            <div class="g-dialog-container">
                <div class="author-input-box">
                    <el-form ref="licenseForm" :model="licenseForm" :rules="licenseRules" autocomplete="on"
                             label-position="left">
                        <el-form-item prop="licenseCode">
                            <el-input
                                ref="username"
                                v-model.trim="licenseForm.licenseCode"
                                placeholder="请输入授权码"
                                name="licenseCode"
                                type="textarea"
                                resize="none"
                                autocomplete="on"
                                @keyup.enter.native="handleRefreshLicense"
                            />
                        </el-form-item>
                    </el-form>
                </div>
                <div class="g-dialog-footer">
                    <el-button type="primary" @click.native.prevent="handleRefreshLicense" icon="el-icon-circle-check"
                               size="mini">保存
                    </el-button>
                    <el-button type="primary"
                               @click.native.prevent="licenseDialog = false ; licenseForm.licenseCode = ''"
                               icon="el-icon-circle-close"
                               size="mini">取消
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getAuthorization, makeAuthorization } from '@/api/license/author'

export default {
    name: 'License',
    data() {
        return {
            checked: true,
            licenseData: {
                sysMenuDtoList: [],
                edition: '',
                endDate: '',
                mcsCount: '',
                countList: []
            },

            licenseForm: {
                licenseCode: ''
            },
            licenseRules: {
                licenseCode: [{ required: true, trigger: 'blur', message: '授权码不能为空' }]
            },
            licenseDialog: false
        }
    },
    created() {
        this.$startLoading()
        getAuthorization().then(res => {
            this.$endLoading()
            if (res.status !== 200) return this.$msgPrompt.error(res.msg)
            this.licenseData = res.obj
        })
    },
    methods: {
        handleRefreshLicense() {
            this.$refs.licenseForm.validate((valid) => {
                if (!valid) return
                this.$startLoading()
                makeAuthorization(this.licenseForm.licenseCode)
                    .then((res) => {
                        this.$endLoading()
                        if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                        this.$msgPrompt.success(res.msg)
                        this.logout()
                    })
            })
        },

        // 登出
        async logout() {
            /**
             *  路由表生成后当你退出换一个用户进来后，路由表并不会自动更新，这个情况下会有问题，所以需要我们手动清除路由，有两种方法，
             *  第一种:直接刷新页面重置所有变量，
             *  第二种:利用路由的matcher方法
             */
            await this.$store.dispatch('user/logout')
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="scss" scoped>
.license-container {
    padding: 0;
    display: flex;
    flex-direction: column;

    ::v-deep .el-divider {
        margin: 12px 0;
    }

    .license-header {
        font-weight: 600;
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 20px;
        padding: 20px;
        @include themify() {
            background-color: themed("treeBoxBg");
        }
    }

    .license-body {
        flex-grow: 1;
        padding: 24px;
        //height: calc(100% - 112px);
        display: flex;
        flex-direction: column;
        @include themify() {
            background-color: themed("treeBoxBg");
        }

        .license-info-title {
            margin-bottom: 20px;
            font-weight: 700;
            font-size: 16px;
            line-height: 1.5715;
            white-space: nowrap;
            text-overflow: ellipsis;


        }

        .license-info {
            .license-info-view {
                overflow: auto;

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 50%;
                        margin-bottom: 16px;
                    }
                }

            }
        }

        .license-block {

            .license-info-view {
                min-height: 30px;
                overflow: auto;
            }
        }

        .license-num {
            flex-grow: 1;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            .license-info-view {
                flex-grow: 1;

                overflow: hidden;
            }
        }


    }

    ::v-deep .el-form-item {
        border: 2px solid rgba(32, 163, 245, 0.4);
        background: rgba(24, 136, 203, 0.3);
        border-radius: 5px;
        color: #454545;
    }

    ::v-deep .custom-dialog {
        border-radius: 5px;

        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
        }

        .el-dialog__title {
            color: #fff;
            font-size: 14px;
        }

        .el-dialog__body {
            height: 400px;
            padding: 16px 16px 0;

            .author-input-box {
                height: 100%;

                .el-form {
                    height: 100%;

                    .el-form-item {
                        height: 100%;

                        .el-form-item__content {
                            height: 100%;
                        }
                    }
                }

                .el-textarea {
                    height: 100%;

                    overflow: hidden;

                    .el-textarea__inner {
                        height: 100%;
                        color: #fff;
                        background-color: transparent;
                        border: none;

                        &:hover {
                            border: none;
                        }
                    }
                }
            }


            .g-dialog-footer {
                padding: 10px 0;
            }
        }
    }
}

</style>
